<template>
  <!--头部导航栏  定位+搜索框 -->
  <div class="header">
    <div class="location">
      <div class="icon">
        <van-icon name="location" />
        <div class="icon-text">饿了么</div>
      </div>
      <div class="location-text">
        云南大学呈贡校区北门
        <van-icon name="arrow-down" />
      </div>
    </div>
    <van-sticky>
      <OpSearch
          shape="round"
          background="linear-gradient(to right, rgb(53, 200, 250), rgb(31, 175, 243))"
          placeholder="请输入要查询的商品"
          @inputClick="emits('searchClick')"
      >
        <template #right-icon>
          <div @click="emits('searchClick')">搜索</div>
        </template>
      </OpSearch>
    </van-sticky>
  </div>

</template>

<script setup lang="ts">
import OpSearch from "@/components/OpSearch.vue";

//暴露事件 搜索框被点击 文本框被点击
interface IEmits{
  (e:'searchClick'):void
}
const emits=defineEmits<IEmits>()
</script>

<style scoped>
.header{
  width: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  /*堆叠优先级*/
  z-index:1000;
  .location{
    width: 100%;
    height: 12vw;
    display: flex;
    justify-content: center;
    background: linear-gradient(to right, rgb(53, 200, 250), rgb(31, 175, 243));
    .icon{
      display: flex;
      align-items: center;
      font-size:7vw;
      flex: 4;
      padding-left: 3vw;
      .icon-text{
        padding-left: 3vw;
      }
    }
    .location-text{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 4.5vw;
    }
  }
}

</style>

<style lang="scss">
.header {
  .van-field__right-icon {
    margin-right: 0;
  }
}
</style>